<template>
  <view class="content">
    <!-- 用户中心 -->
    <view class="user">
      <wd-img :width="100" :height="100" :size="112" round :src="userInfo.avatar || 'https://cloud-minapp-47085.cloud.ifanrusercontent.com/1sytT0tqnNkw1tEn.jpg'" />
      <h4 class="user-name">{{ userInfo.userName || '未登录' }}</h4>
      
      <!-- 登录按钮 -->
      <view v-if="!userStore.isLogin" class="login-btn" @click="goToLogin">
        <wd-button type="primary" size="small">立即登录</wd-button>
      </view>
      
      <!-- 功能按钮 -->
      <view class="setting-icon" @click="openModal">
        <uv-icon size="48" name="https://cloud-minapp-47070.cloud.ifanrusercontent.com/1r16N8bPkbYLKEY3.svg"></uv-icon>
      </view>
    </view>
    <!-- 设置项 -->
    <view class="setting-list" style="transform: translateY(-6vh)">
      <view v-for="item in settingList" :key="item.id" class="setting-list-item">
        <image :src="item.iconUrl" />
        <text class="setting-list-item-name">{{ item.name }}</text>
        <view class="extra-icon">
          <wd-icon name="arrow-right" size="26rpx"></wd-icon>
        </view>
      </view>
    </view>
    <!-- 系统服务 -->
    <view class="setting-list sys-server">
      <view v-for="item in sysServerList" :key="item.id" class="setting-list-item" @click="detailService(item.id)">
        <image :src="item.iconUrl" />
        <span class="setting-list-item-name">{{ item.name }}</span>
        <view class="extra-icon">
          <wd-icon name="arrow-right" size="26rpx"></wd-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useUserStore } from "@/store"
import { computed, ref } from "vue"

const userStore = useUserStore()
console.log('userStore', userStore)

const userInfo = computed(() => {
  return userStore.userInfo || {}
})

const settingList = [
  {
    id: "destination",
    name: "待开放...",
    iconUrl: "https://cloud-minapp-47070.cloud.ifanrusercontent.com/1r15Mlrlil2Jxla0.svg",
  },
  {
    id: "sendConfig",
    name: "待开放...",
    iconUrl: "https://cloud-minapp-47070.cloud.ifanrusercontent.com/1r15LFYf3MzyAtTk.svg",
  },
  {
    id: "scan",
    name: "待开放...",
    iconUrl: "https://cloud-minapp-47070.cloud.ifanrusercontent.com/1r14i4BNyFlI72wN.svg",
  },
  {
    id: "writingRecognition",
    name: "待开放...",
    iconUrl: "https://cloud-minapp-47070.cloud.ifanrusercontent.com/1r14i4VetzMShwfJ.svg",
  },
  {
    id: "fileName",
    name: "待开放...",
    iconUrl: "https://cloud-minapp-47070.cloud.ifanrusercontent.com/1r14i41zW7S1i82B.svg",
  },
]

const sysServerList = [
  {
    id: "help",
    name: "帮助中心",
    iconUrl: "https://cloud-minapp-47070.cloud.ifanrusercontent.com/1r15C9JN7qxudFaA.svg",
  },
  {
    id: "concat-us",
    name: "联系我们",
    iconUrl: "https://cloud-minapp-47070.cloud.ifanrusercontent.com/1r15C9JN7qxudFaA.svg",
  },
  {
    id: "privacy-policy",
    name: "隐私政策",
    iconUrl: "https://cloud-minapp-47070.cloud.ifanrusercontent.com/1r15C9JN7qxudFaA.svg",
  },
  {
    id: "term-of-service",
    name: "服务条款",
    iconUrl: "https://cloud-minapp-47070.cloud.ifanrusercontent.com/1r15C9JN7qxudFaA.svg",
  },
  {
    id: "退出登录",
    name: "服务条款",
    iconUrl: "https://cloud-minapp-47070.cloud.ifanrusercontent.com/1r15C9JN7qxudFaA.svg",
  },
  {
    id: "logout",
    name: "退出登录",
    iconUrl: "https://cloud-minapp-47070.cloud.ifanrusercontent.com/1r15C9JN7qxudFaA.svg",
  },
]

const detailService = (key) => {
  switch(key){
    case 'logout':
      console.log('logout')
      uni.showModal({
        title: '提示',
        content: '确定退出登录？',
        success: function (res) {
          if (res.confirm) {
            userStore.logout()
          }
        }
      })
  }
}

// 跳转到登录页
const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/login/index'
  })
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 28rpx;
  margin-bottom: 2vh; //防止底部tarbar遮挡
  background: url(https://cloud-minapp-47070.cloud.ifanrusercontent.com/1r15g8yZcaE0qGld.png) no-repeat 0 0, #f8f8f8;
  background-size: 100% auto;
}
.user {
  padding: 8vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;

  image {
    width: 58rpx;
    height: 58rpx;
  }

    
  &-name {
    margin: 4px 0;
  }
  &-email {
    font-size: 22rpx;
  }
  .setting-icon {
    position: absolute;
    top: 6vh;
    right: 24rpx;
  }
}
.setting-list {
  padding: 1vh 28rpx;
  border-radius: 16rpx;
  background-color: #fff;
  &-item {
    position: relative;
    padding: 2vh 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f7f7f7;

    image {
      width: 58rpx;
      height: 58rpx;
    }
    
    &-name {
      margin-left: 24rpx;
    }
    &:last-child {
      border: none;
    }
    .extra-icon {
      position: absolute;
      right: 8rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.sys-server {
  margin-top: 2vh;
}

// 新增登录按钮样式
.login-btn {
  margin-top: 20rpx;
  text-align: center;
  
  .wd-button {
    width: 200rpx;
  }
}
</style>
